import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:leader_help/utils/component/carousel_text.dart';
import 'package:leader_help/utils/component/component.dart';
import 'package:leader_help/utils/component/dialog/dialog_util.dart';
import 'package:leader_help/value/topcolors.dart';

import 'key_task_logic.dart';

class KeyTaskPage extends StatefulWidget {
  const KeyTaskPage({Key? key}) : super(key: key);

  @override
  _KeyTaskPageState createState() => _KeyTaskPageState();
}

class _KeyTaskPageState extends State<KeyTaskPage> {
  final logic = Get.put(KeyTaskLogic());
  final state = Get.find<KeyTaskLogic>().state;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: detailAppBar(
        context,
        title: "关键任务",
        actions: [
          Container(
            margin: EdgeInsets.only(right: 10.r),
            child: InkWell(
              child: Row(
                children: [
                  const Icon(Icons.search_outlined, size: 18, color: Colors.white,),
                  SizedBox(width: 2.r,),
                  const Text("搜索", style: TextStyle(color: Colors.white, fontSize: 15),),
                ],
              ),
              onTap: () {

              },
            ),
          ),
        ]
      ),
      body: Column(
        children: [
          Row(
            children: [
              Expanded(
                child: TabBar(
                  tabs: [for (final tab in state.tabs) Tab(text: tab,)],
                  indicatorColor: TopColors.main_red,
                  indicator: BoxDecoration(
                      borderRadius: BorderRadius.circular(2),
                      color: TopColors.main_red),
                  indicatorPadding: const EdgeInsets.only(left: 20, right: 20, top: 40, bottom: 5),
                  // 字体颜色
                  labelColor: TopColors.main_red,
                  labelStyle: const TextStyle(fontSize: 18, fontWeight: FontWeight.w500),
                  labelPadding: const EdgeInsets.only(left: 13, right: 13),
                  // 没有选中字体颜色
                  unselectedLabelColor: TopColors.black_33,
                  unselectedLabelStyle: const TextStyle(fontSize: 15),
                  // 是否滚动
                  isScrollable: true,
                  // 控制器
                  controller: logic.controller,
                  physics: const BouncingScrollPhysics(),
                )
              ),
              TextButton(
                style: ButtonStyle(
                  padding: MaterialStateProperty.all(const EdgeInsets.all(0)),
                ),
                onPressed: () {  },
                child: Text("更多", style: TextStyle(color: TopColors.black_33, fontSize: 15),)
              )
            ],
          ),
          Expanded(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Container(
                    padding: EdgeInsets.only(left: 10.r),
                    width: Get.width,
                    height: 80.r,
                    decoration: BoxDecoration(
                      color: TopColors.gray_line,
                      borderRadius: BorderRadius.circular(2.r),
                    ),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Container(
                              margin: EdgeInsets.only(right: 5.r),
                              width: 3.r,
                              height: 15.r,
                              color: TopColors.main_red,
                            ),
                            const Text("任务目标"),
                          ],
                        ),
                        const Text("完整准确全面贯彻新发展理念，坚定推动高质量发展"),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 2.r),
                    padding: EdgeInsets.only(left: 10.r, top: 5.r, right: 10.r),
                    width: Get.width,
                    decoration: BoxDecoration(
                      color: TopColors.gray_line,
                      borderRadius: BorderRadius.circular(2.r),
                    ),
                    child: Column(
                      children: [
                        Row(
                          children: [
                            Expanded(
                              child: Row(
                                children: [
                                  Container(
                                    margin: EdgeInsets.only(right: 5.r),
                                    width: 3.r,
                                    height: 15.r,
                                    color: TopColors.main_red,
                                  ),
                                  Text("任务拆分", style: TextStyle(color: TopColors.black_33, fontSize: 15),),
                                  SizedBox(width: 5.r),
                                  Text("5项一级任务，36项二级任务", style: TextStyle(color: TopColors.green_live, fontSize: 15),),
                                ],
                              ),
                            ),
                            OutlinedButton(
                              style: ButtonStyle(
                                padding: MaterialStateProperty.all(const EdgeInsets.all(5)),
                              ),
                              onPressed: () {
                                setState(() {
                                  if (logic.isExpanded) {
                                    logic.isExpanded = false;
                                  } else {
                                    logic.isExpanded = true;
                                  }
                                });
                              },
                              child: Text("展开所有任务", style: TextStyle(color: TopColors.black_33, fontSize: 13),)
                            )
                          ],
                        ),
                        ListView.builder(
                          shrinkWrap: true, //解决无线高度问题 解决SingleChildScrollView 和listview冲突问题 ListView.builder
                          itemBuilder: (BuildContext context, int index) {
                            return taskListItem(state.name[index]);
                          },
                          itemCount: state.name.length,
                          physics: const BouncingScrollPhysics(),
                        ),
                      ],
                    ),
                  ),
                  Container(
                    margin: EdgeInsets.only(top: 2.r),
                    padding: EdgeInsets.only(left: 10.r, top: 10.r, right: 10.r, bottom: 10.r),
                    width: Get.width,
                    decoration: BoxDecoration(
                      color: TopColors.gray_line,
                      borderRadius: BorderRadius.circular(2.r),
                    ),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          children: [
                            Container(
                              margin: EdgeInsets.only(right: 5.r),
                              width: 3.r,
                              height: 15.r,
                              color: TopColors.main_red,
                            ),
                            Text("任务监测", style: TextStyle(color: TopColors.black_33, fontSize: 15),),
                          ],
                        ),
                        Container(
                          margin: EdgeInsets.only(top: 10.r),
                          padding: EdgeInsets.only(left: 10.r, top: 10.r, right: 10.r, bottom: 10.r),
                          width: Get.width,
                          height: 105.r,
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(5.r),
                          ),
                          child: Row(
                            children: [
                              Container(
                                alignment: Alignment.center,
                                padding: EdgeInsets.only(left: 10.r, top: 10.r, right: 10.r, bottom: 10.r),
                                width: 65.r,
                                decoration: BoxDecoration(
                                  color: Colors.blue,
                                  borderRadius: BorderRadius.circular(5.r),
                                ),
                                child: const Text("万人助万企", style: TextStyle(color: Colors.white, fontSize: 15),),
                              ),
                              Flexible(
                                child: CarouselText(
                                  height: 80.r,
                                  list: logic.state.content as List<String>,
                                  color: TopColors.black_33,
                                  onTap: logic.actionToPointSmall,
                                ),
                              ),
                            ],
                          )
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      )
    );
  }

  /// 任务拆分 list
  Widget taskListItem(String name) {
    return Container(
      margin: const EdgeInsets.only(top: 3, bottom: 3),
      padding: EdgeInsets.only(left: 10.r, right: 10.r),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5.r),
      ),
      child: Column(
        children: <Widget>[
          ExpansionPanelList(
            expandedHeaderPadding: const EdgeInsets.all(0),
            elevation: 0,
            children : <ExpansionPanel>[
              ExpansionPanel(
                headerBuilder:(context, isExpanded){
                  return Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(name, style: TextStyle(color: TopColors.main_red, fontSize: 15),),
                      TextButton(
                          style: ButtonStyle(
                            backgroundColor: MaterialStateProperty.all<Color>(TopColors.gray_line),
                            padding: MaterialStateProperty.all(const EdgeInsets.all(0)),
                          ),
                          onPressed: () {
                            if (state.select.value) {
                              showAlert(msg: "      该项任务已取消设为重点任务，将不再“我的重点”模块显示。");

                            } else {
                              showAlert(msg: " 已将该项任务设为重点，您可以在“我的重点”模块快速查看任务问题，跟踪任务进度。");
                            }
                            logic.setSelect();
                          },
                          child: Text(state.select.value ? "取消重点" : "设为重点", style: TextStyle(color: TopColors.black_33, fontSize: 13),)
                      )
                    ],
                  );
                },
                body: Padding(
                  padding: const EdgeInsets.fromLTRB(15, 0, 15, 15),
                  child: ListBody(
                    children: const [
                      Card(
                        margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(padding: EdgeInsets.all(8),child: Text('1.建设一流创新平台'),),
                      ),
                      Card(
                        margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(padding: EdgeInsets.all(8),child: Text('2.凝练一流创新课题'),),
                      ),
                      Card(
                        margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(padding: EdgeInsets.all(8),child: Text('3.培育一流创新主体'),),
                      ),
                      Card(
                        margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(padding: EdgeInsets.all(8),child: Text('4.集聚一流创新团队'),),
                      ),
                      Card(
                        margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(padding: EdgeInsets.all(8),child: Text('5.创设一流创新制度'),),
                      ),
                      Card(
                        margin:EdgeInsets.fromLTRB(0, 0, 0, 10),
                        child: Padding(padding: EdgeInsets.all(8),child: Text('6.厚植一流创新文化'),),
                      ),
                    ],
                  ),
                ),
                isExpanded: logic.isExpanded,
                canTapOnHeader: true,
              ),

            ],
            expansionCallback:(panelIndex, isExpanded){
              setState(() {
                logic.isExpanded = !isExpanded;
              });
            },
            animationDuration : kThemeAnimationDuration,
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    Get.delete<KeyTaskLogic>();
    super.dispose();
  }
}